<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>积分安装币概览</title>
    <style>
        .tile-stats h3 {
            font-size: 16px;
        }

        .tile-stats .count {
            font-size: 26px;
        }

        .hidChart {
            visibility: hidden;
            height: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="row top_tiles">
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-leaf" style="color: #e25a5a;"></i></div>
            <div class="count">${integralUsedTotal!0}</div>
            <h3>积分消耗总数</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-gift" style="color: #09835a;"></i></div>
            <div class="count">${exchangePrizeCount!0}</div>
            <h3>兑换礼品总数</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-fire" style="color: #568ebf;"></i></div>
            <div class="count">${usedCoinCount!0}</div>
            <h3>安装币消耗总数</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-wrench" style="color: #8775a7;"></i></div>
            <div class="count">${gainCoinCount!0}</div>
            <h3>安装币获得总数</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
</div>

<!-- 双Y轴单线图 -->
<div class="row">

    <!-- 月用户获得积分数量 -->
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>月用户获得积分数量</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('gainIntegralChart' , 'gainIntegralTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('gainIntegralTable' , 'gainIntegralChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporIntegralCoinDetailExcel(2)"><i
                            class="fa fa-download"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 353px;">
                <div>
                    <div class="controls input-append date form_date gainIntegralDate" data-date=""
                         data-date-format="dd MM"
                         data-link-field="gainIntegralDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="gainIntegralDateHM1" size="16" type="text" value="" readonly>
                    </div>
                    —
                    <input type="hidden" id="gainIntegralDate1" value=""/>
                    <div class="controls input-append date form_date gainIntegralDate" data-date=""
                         data-date-format="dd MM"
                         data-link-field="gainIntegralDate2" data-link-format="yyyy-mm">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="gainIntegralDateHM2" size="16" type="text" value="" readonly>
                    </div>
                    <input type="hidden" id="gainIntegralDate2" value=""/>
                </div>
                <div id="gainIntegralChart">
                    <div id="hcForGainIntegral" style="height: 280px"></div>
                </div>
                <div class="hidChart" id="gainIntegralTable">
                    <table id="gainIntegralChartTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>积分</th>
                            <th>月份</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 每月用户获得安装币数量 -->
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>月用户获得安装币数量</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 5px;">
                    <li><a class="collapse-link" onclick="changeDisplay('gainCoinDateChart' , 'gainCoinDateTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('gainCoinDateTable' , 'gainCoinDateChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporIntegralCoinDetailExcel(0)"><i
                            class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                    <div class="controls input-append date form_date gainCoinDate" data-date="" data-date-format="dd MM"
                         data-link-field="gainCoinDate" data-link-format="yyyy-mm" style="margin-right: 3px;">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="gainCoinDateHM1" size="16" type="text" value="" readonly>
                    </div>
                    —
                    <input type="hidden" id="gainCoinDate1" value=""/>
                    <div class="controls input-append date form_date gainCoinDate" data-date="" data-date-format="dd MM"
                         data-link-field="gainCoinDate" data-link-format="yyyy-mm">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="gainCoinDateHM2" size="16" type="text" value="" readonly>
                    </div>
                    <input type="hidden" id="gainCoinDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 350px;">
                <div id="gainCoinDateChart">
                    <div id="hcForgainCoinDate" style="height: 350px"></div>
                </div>
                <div class="hidChart" id="gainCoinDateTable">
                    <table id="gainCoinDateChartTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>数量</th>
                            <th>月份</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 每月商品订单金额及增长率 -->


</div>

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>月用户消耗安装币数量</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 5px;">
                    <li><a class="collapse-link" onclick="changeDisplay('usedCoinDateChart' , 'usedCoinTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('usedCoinTable' , 'usedCoinDateChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporIntegralCoinDetailExcel(1)"><i
                            class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                    <div class="controls input-append date form_date usedCoinDate" data-date="" data-date-format="dd MM"
                         data-link-field="usedCoinDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="usedCoinDateHM1" size="16" type="text" value="" readonly>
                    </div>
                    —
                    <input type="hidden" id="usedCoinDateDate1" value=""/>
                    <div class="controls input-append date form_date usedCoinDate" data-date="" data-date-format="dd MM"
                         data-link-field="usedCoinDate2" data-link-format="yyyy-mm">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="usedCoinDateHM2" size="16" type="text" value="" readonly>
                    </div>
                    <input type="hidden" id="usedCoinDateDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 310px;">
                <div id="usedCoinDateChart">
                    <div id="hcForUsedCoinDate" style="height: 310px"></div>
                </div>
                <div class="hidChart" id="usedCoinTable">
                    <table id="usedCoinDateChartTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>数量</th>
                            <th>月份</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 积分各获得方式的数量占比 -->
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>积分各获得方式的数量占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height:313px">
                <div id="gainIntrgralPie" style="height:313px;"></div>
            </div>
        </div>
    </div>

</div>


<div class="row">
    <!-- 月用户消耗积分数量 -->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>月用户消耗积分数量</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('usedIntegralChart' , 'usedIntegralTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('usedIntegralTable' , 'usedIntegralChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporIntegralCoinDetailExcel(3)"><i
                            class="fa fa-download"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 313px;">
                <div>
                    <div class="controls input-append date form_date usedIntegralDate" data-date=""
                         data-date-format="dd MM"
                         data-link-field="usedIntegralDate" data-link-format="yyyy-mm" style="margin-right: 3px;">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="usedIntegralDateHM1" size="16" type="text" value="" readonly>
                    </div>
                    —
                    <input type="hidden" id="usedIntegralDate1" value=""/>
                    <div class="controls input-append date form_date usedIntegralDate" data-date=""
                         data-date-format="dd MM"
                         data-link-field="usedIntegralDate" data-link-format="yyyy-mm">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="usedIntegralDateHM2" size="16" type="text" value="" readonly>
                    </div>
                    <input type="hidden" id="usedIntegralDate2" value=""/>
                </div>
                <div id="usedIntegralChart">
                    <div id="hcForUsedIntegral" style="height: 280px"></div>
                </div>
                <div class="hidChart" id="usedIntegralTable">
                    <table id="usedIntegralChartTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>积分</th>
                            <th>月份</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 积分各消耗方式的数量占比 -->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>积分各消耗方式的数量占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height:313px">
                <div id="usedIntrgralPie" style="height:313px;"></div>
            </div>
        </div>
    </div>
    <!-- 排名表 -->
    <!-- 兑换的礼品数量排名前5的商品 -->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>兑换的礼品数量排名前5的商品</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="viewGiftNumTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <!--<th>序号</th>-->
                        <th>商品名称</th>
                        <th style="min-width: 55px;">兑换数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="/res/build/js/common/common.js"></script>
<script src="/res/build/js/integralCoin/integralCoinView.js"></script>
</body>
</html>